<template>
  <div class="breadcrumb-wrapper">
    <div class="title">当前位置：</div>
    <el-input
      class="file-path-input"
      ref="filePathInputRef"
      placeholder="请输入路径"
      v-model="inputFilePath"
      :autofocus="true"
      v-show="isShowInput"
      @blur="handleInputBlurEnter"
      @change="handleInputBlurEnter"
    ></el-input>
    <div
      class="breadcrumb-box"
      :class="{ 'able-input': true }"
      v-show="!isShowInput"
      @click.self="handleClickBreadCrumbSelf"
    ></div>
  </div>
</template>

<script setup>
const inputFilePath = ref(); //  路径输入
const isShowInput = ref(false); //  是否展示路径输入框
/**
 * 点击面包屑导航栏空白处
 */
function handleClickBreadCrumbSelf() {
  isShowInput.value = true;
}
/**
 * 路径输入框失去焦点或用户按下回车时触发
 */
function handleInputBlurEnter() {
  isShowInput.value = false;
}
</script>

<style lang="stylus" scoped>
.breadcrumb-wrapper {
  padding: 0px 16px;
  height: 30px;
  line-height: 30px;
  display: flex;

  .title, >>> .el-breadcrumb {
    height: 30px;
    line-height: 30px;
  }

  .file-path-input {
    flex: 1;
    font-size: 14px;
  }

  .breadcrumb-box {
    padding: 0 8px;
    flex: 1;
    display: flex;

    &.able-input {
      cursor: pointer;

      &:hover {
        background: #F5F7FA;
      }
    }
  }
}
</style>